<template>
    <div class="search-line">
        <el-text class="w-150px mb-2" truncated>
            影院名称
        </el-text>
        <el-input style="width:200px" v-model="filmName" placeholder="" />
        <el-button type="primary" size="default" @click="getList">
            <i class="iconfont icon-sousuo"></i>
            搜索
        </el-button>
    </div>
    <div class="tab-container">
        <div class="btn">
            <el-button type="primary" @click="openDialog">
                <i style="font-size: 26px;">+</i>
                添加</el-button>
            <el-button type="success">
                <i class="iconfont icon-diqiu"></i>
                地图找店</el-button>
        </div>
        <el-table :data="list" style="width: 100%;" height="440" border>
            <el-table-column align="center" fixed label="编号" prop="store_id" width="60" />
            <el-table-column align="center" prop="title" label="影院名" width="200" />
            <el-table-column align="center" prop="avg_price" label="均价" width="120" />
            <el-table-column align="center" prop="tel" label="电话" width="200" />
            <el-table-column align="center" prop="area_name" label="地址" width="200" />
            <el-table-column align="center" prop="address" label="影院地址" width="200" />
            <el-table-column align="center" prop="description" label="描述" width="200" />
            <el-table-column align="center" fixed="right" label="操作" width="80">
                <template #default="scope">
                    <el-button type="danger" size="small" @click.prevent="deleteRow(scope.$index)">
                        <i class="iconfont icon-shanchu"></i>
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="demo-pagination-block">
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                :page-sizes="[10, 20, 30, 40]" :small="small" :disabled="disabled" :background="background"
                layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </div>
    </div>

    <el-dialog v-model="dialogVisible" title="影院添加" :width="srceenWidth" :before-close="handleClose">
        <el-form :model="form" label-width="120px">
            <el-form-item label="影院名称">
                <el-input v-model="form.title" placeholder="请输入影院名称" required />
            </el-form-item>
            <el-form-item label="人均">
                <el-input v-model="form.avg_price" placeholder="请输入影院人均" />
            </el-form-item>
            <el-form-item label="手机号码">
                <el-input v-model="form.tel" placeholder="请输入手机号" />
            </el-form-item>
            <el-form-item label="影院描述">
                <el-input v-model="form.description" placeholder="请输入影院描述" />
            </el-form-item>
            <el-form-item label="所属地区">
                <el-cascader :options="options" :props="props1" clearable @change="handleChange($event)" />
            </el-form-item>
            <el-form-item label="地图选点">
                <el-button type="default" size="default" @click="">点击选择地图位置</el-button>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="add">
                    立即创建
                </el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { requestIns } from '@/utils/request'
import { ElMessage } from 'element-plus'

const dialogVisible = ref(false)
const srceenWidth = ref('50%')
const list = ref([])
const total = ref(0)
const filmName = ref('')
const currentPage = ref(1)
const pageSize = ref(10)
const small = ref(false)
const background = ref(true)
const disabled = ref(false)
const type = ref('一级')
const pid = ref(1)
const props1 = {
    checkStrictly: true,
    lazy: true,
    lazyLoad: async (node, resolve) => {
        const { level, value } = node
        console.log('node', node)
        type.value = level === 0 ? '一级' : level === 1 ? '二级' : '三级'
        pid.value = value || 1
        console.log('type', type.value, "pid", pid.value)

        const subList = await getOptions()
        const nodes = subList.map(item => ({
            value: item.area_id,
            label: item.area_name,
            leaf: level >= 2,
            ...item
        }))
        resolve(nodes)


    }
}
const options = ref([])
const form = ref({
    title: '',
    avg_price: 0,
    tel: '',
    description: '',
    area_id: 0,
    address: '测试中',
    lat: 0,
    lng: 0,
})
onMounted(() => {
    getList()
    changeWidth()
})
window.addEventListener('resize', () => {
    changeWidth()
})
const changeWidth = () => {
    if (window.innerWidth < 1000) {
        srceenWidth.value = '90%'
    } else {
        srceenWidth.value = '50%'
    }
}

const getList = async () => {
    const res = await requestIns.request('/fsdy/cinema/index', 'get', {
        pagenum: currentPage.value,
        pagesize: pageSize.value,
        title: filmName.value
    })
    console.log(res)
    if (res.state = 200) {
        list.value = res.list
        total.value = res.total
    }
}
const deleteRow = async (index) => {
    const item = list.value.find((item, idx) => idx == index)
    console.log(item.store_id);

    const res = await requestIns.request('/fsdy/cinema/delete', 'delete', {
        store_id: item.store_id
    })
    console.log(res)
    if (res.state === 200) {
        getList()
        ElMessage.success('删除成功')
    }
}
const openDialog = async () => {
    dialogVisible.value = true
    const list = await getOptions()
    list.forEach(item => {
        options.value.push({
            value: item.area_id,
            label: item.area_name,
            leaf: false,
            ...item
        })
    })
}

const getOptions = async () => {
    const res = await requestIns.request('/area/index', 'get', {
        type: type.value,
        pid: pid.value,
    })
    console.log(res.data)

    return res.data
}
const handleChange = (e) => {
    console.log('e'+e)    
    form.value.area_id = e[e.length - 1]
    console.log(form.value.area_id)

}
const add = async () => {

    const res = await requestIns.request('/fsdy/cinema/create', 'post', {
        title: form.value.title,
        avg_price: form.value.avg_price,
        tel: form.value.tel,
        description: form.value.description,
        area_id: form.value.area_id,
        address: form.value.address,
        lat: form.value.lat,
        lng: form.value.lng
    },{
        'Content-Type': 'application/x-www-form-urlencoded'
    })

    if (res.state==201) {
        getList()
        ElMessage.success('添加成功')
    }
    dialogVisible.value = false
}

const handleSizeChange = (val) => {
    currentPage.value = 1
    pageSize.value = val
    getList()
}
const handleCurrentChange = (val) => {
    currentPage.value = val
    getList()
}
const handleClose = (done) => {
    done()
}
</script>

<style scoped lang="scss">
.search-line {
    background-color: #fff;
    width: 100%;
    padding: 20px ;
    box-sizing: border-box;
    margin-bottom: 20px;
    display: flex;
    align-items: center;

    .el-input {
        width: 300px;
        margin-left: 20px;
        margin-right: 40px;
    }
}

.tab-container {
    background-color: #fff;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;

    .btn {
        padding-bottom: 15px;
    }
}

.demo-pagination-block {
    margin-top: 10px;
    width: 100%;
    display: flex;
    justify-content: center;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}
</style>